/*
 * @Author: wurangkun
 * @Date: 2024-07-13 19:50:36
 * @LastEditTime: 2024-08-30 23:30:44
 * @LastEditors: wurangkun
 * @FilePath: \my-app\components\paging\index.tsx
 * @Description: 
 */
import { ListView } from "@ant-design/react-native";

import { View, Text, FlatList, TouchableOpacity, RefreshControl, ActivityIndicator } from 'react-native'
import React, { useEffect, useRef } from 'react'
import { ScreenBar } from "@/components/ScreenBar";
import { Stack } from "expo-router";
import { SafeAreaView } from "react-native-safe-area-context";
import { Colors } from "react-native/Libraries/NewAppScreen";

type Props = {
  list: any,
  keyExtractor: (item: any, index: number) => string
  query: (current: number, size: number, complete: (data: any) => void) => void
  renderItem: (item: any, index?: number) => JSX.Element
  defaultPageSize?: number
  // data有默认值时，将auto设置为false
  auto?: boolean
}

export default function List(props: Props) {
  const { list = [], keyExtractor, query, renderItem, defaultPageSize = 10, auto = true } = props
  // auto 自动获取则current从0开始，否则从1开始
  const [current, setCurrent] = React.useState(0)
  const [refreshing, setRefreshing] = React.useState(false);
  const [loadMore, setLoadMore] = React.useState(true)
  const [loading, setLoading] = React.useState(false)
  // 下拉刷新
  const onRefresh = React.useCallback(async () => {
    setRefreshing(true);
    setCurrent(1)
    query(current, defaultPageSize, (data) => {
      console.log(data)
      setRefreshing(false)
      if (data.length >= defaultPageSize) {
        setLoadMore(true)
      }
    })
  }, []);


  // 加载更多
  const onEndReached = () => {
    if (loading && loadMore) return
    // 如果有默认数据，则不自动加载更多
    if (list.length && list.length < defaultPageSize) {
      return setLoadMore(false)
    }
    setLoading(true)
    const nextCurrent = current + 1 + (current === 0 && auto ? 0 : 1)
    setCurrent(nextCurrent)
    query(nextCurrent, defaultPageSize, (data) => {
      setLoading(false)
      // 分页加载更多 返回的数据没有满足分页数据数量，则代表分页数据已经加载完毕
      if (data.length < defaultPageSize) {
        setLoadMore(false)
      }
    })
  }


  return (
    <FlatList
      keyExtractor={keyExtractor}
      data={list}
      renderItem={renderItem}
      onEndReached={onEndReached}
      // onRefresh={onRefresh}
      // refreshing={refreshing}
      // refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
      refreshControl={
        <RefreshControl
          onRefresh={onRefresh}
          refreshing={refreshing}
          progressBackgroundColor="#888"
          tintColor="#000"
          size={8}
        />
      }
      onEndReachedThreshold={0.5}
      ListFooterComponent={
        <>
          <View style={{ flexDirection: "row", alignItems: 'center', justifyContent: 'center', paddingVertical: 10 }}>
            {loadMore ? <ActivityIndicator color="#888" size="small" style={{ marginRight: 10 }} /> : null}
            {
              loadMore ? <Text>正在加载...</Text> : <Text>没有更多了</Text>
            }
          </View>
          <SafeAreaView edges={['bottom']} />
        </>
      }
    />
  )
}